<template>
  <div class="classify">
    <div class="left">
      <el-form
        :model="dynamicValidateForm"
        ref="dynamicValidateForm"
        label-width="100px"
        class="demo-dynamic"
      >
        <el-form-item prop="email" label="分类名称">
          <el-input v-model="dynamicValidateForm.email"></el-input>
        </el-form-item>
        <el-form-item
          v-for="(domain, index) in dynamicValidateForm.domains"
          :label="'分类id'"
          :key="domain.key"
          :prop="'domains.' + index + '.value'"
        >
          <el-input v-model="domain.value"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('dynamicValidateForm')"
            >编辑</el-button
          >
          <el-button @click="addDomain">添加</el-button>
          <el-dropdown trigger="click" class="niuaaaa">
            <el-button class="el-dropdown-link">
              删除<i class="el-icon-caret-bottom el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item class="clearfix">
                <span @click="Towdel('确认')">确认</span>
              </el-dropdown-item>
              <el-dropdown-item class="clearfix">
                <span @click="Towdel('取消')">取消</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>
      </el-form>
    </div>

    <div class="right">
      <h3>所有分类</h3>
      <div>
        <el-tag
          v-for="(item, index) in list"
          :key="index"
          class="itemsss"
          @click="Updata(item.id, item.classify)"
          >{{ item.classify }}</el-tag
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      dynamicValidateForm: {
        domains: [
          {
            value: "",
          },
        ],
        email: "",
      },
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      const data = await this.axios("/api/list");
      this.list = data.data.res;
      console.log(this.list);
    },
    //16、正确实现前端的添加分类功能
    submitForm() {
      //18、正确实现前端的编辑分类功能
      let classify = this.dynamicValidateForm.email;
      let id = this.dynamicValidateForm.domains[0].value;
      this.axios.post("/api/updata", { id, classify });
      alert("编辑成功");
      window.location.href = "http://localhost:8080/";
    },
    addDomain() {
        let classify = this.dynamicValidateForm.email;
        alert("添加成功")
        this.axios.post("/api/add",{classify})
    },
    Updata(id, classify) {
      this.axios
        .get("/api/select", { params: { id, classify } })
        .then((res) => {
          this.dynamicValidateForm.email = res.data.res[0].classify;
          this.dynamicValidateForm.domains[0].value = res.data.res[0].id;
        });
    },
    Towdel(str) {
      let classify = this.dynamicValidateForm.email;
      let id = this.dynamicValidateForm.domains[0].value;
      if (str === "确认") {
        this.axios.delete("/api/delete", { params: { id, classify } }).then(res=>{
            console.log(res);
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.classify {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  .left {
    width: 500px;
    height: 500px;
    background-color: aqua;
    margin-top: 100px;
  }
  .right {
    width: 1000px;
    height: 500px;
    background-color: bisque;
    margin-top: 100px;
  }
  .niuaaaa {
    margin-left: 40px;
  }
  .itemsss {
    margin-left: 20px;
  }
}
</style>